<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery-DOM之获取与设置</title>
		
		<!-- jQuery的安装使用: 下载jQuery库,本地引入文件 -->
		<script src="js/jquery.js" ></script>
		
	</head>
	<body>
		
		<p><span>span标签内的p标签一内容</span></p>
		<p><span>span标签内的p标签二内容</span></p>
		<input id="in1" type="text" /><br />
		
		<p>p标签三内容</p>
		<p>p标签四内容</p>
		<input id="in2" type="text" /><br />
		
		<input class="hobby" type="checkbox" value="lanqiu" />篮球
		<input class="hobby" type="checkbox" value="zuqiu" />足球
		<input class="hobby" type="checkbox" value="paiqiu" >排球 <br />
		
		
		<hr />
		<button id="btu1">获取文本内容</button>
		<button id="btu2">修改文本内容</button><br />
		<button id="btu3">获取复选框的选中状态</button><br />
		<button id="btu4">全选</button>
		<button id="btu5">全不选</button><br />
		
		
		<script type="text/javascript" charset="UTF-8">
			$(function(){
				// 获取文本内容: text(), html(), val()
				$("#btu1").click(function(){
					// 获取文本内容: 相当于JavaScript中的innerText
					// 注:text()只获取指定标签内的文本内容
					var s1 = $("p:first").text();  
					console.log(s1)
					
					// 获取文本内容: 相当于JavaScript中的innerHTML
					// 注:html()获取指定标签内部的所有内容,并且不解析
					var s2 = $("p:first").html(); 
					console.log(s2)
					
					// 获取表单标签内的value值
					var s3 = $("#in1").val();
					console.log(s3)
					
				});

				// 设置文本内容: text(string), html(string), val(string)
				$("#btu2").click(function(){
					// 注:text(string)只修改指定标签内的文本内容,不解析
					var s = $("p:eq(2)").text("<span>更改了p标签一的内容</span>").css("color","#A52A2A");  

					// 注:html(string)修改指定标签内部的所有内容,并且解析
					var s = $("p:eq(3)").html("<span>更改了p标签二的内容</span>").css("color","#FFFF00");  
					
					// 获取表单标签内的value值
					var s = $("#in2").val("这是修改了内容");
					
				});		
				
				// 获取属性值: prop(proerty), attr(proerty) 
				// 如: 获取复选框checked属性值
				$("#btu3").click(function(){
					// 获取jQuery数组
					var input_arr = $(".hobby");
					for (var i=0; i<input_arr.length; i++) {
						// 拿到jQuery对象: $(input_arr[i])
						// 获取复选框checked属性值,确认是否是选中状态
						// attr() 获取属性,如果没有选中则返回undefined
						alert($(input_arr[i]).attr("checked"));  // 获取不到
//						alert(input_arr[i].checked); // true或false
						// prop() 获取属性,如果没有选中则返回false
//						alert($(input_arr[i]).prop("checked"));
					}
				});

				// 修改属性值: prop(proerty,value)
				// 如: 修改复选框checked属性值
				$("#btu4").click(function(){
					var input_arr = $(".hobby");
					for (var i=0; i<input_arr.length; i++) {
						// prop() 设置属性,如果没有选中则返回false
						$(input_arr[i]).prop("checked", true);
					}
				});
				
				$("#btu5").click(function(){
					var input_arr = $(".hobby");
					for (var i=0; i<input_arr.length; i++) {
						// prop() 设置属性,如果没有选中则返回false
						$(input_arr[i]).prop("checked", false);
					}
				});
				
			});
			


		</script>

	</body>
	
</html>


